<template>
    <div class="login">
        <div class="login-wrap">
            <div>
                <div class="login-logo">
                    <img src="@/assets/img/login_logo_act.png" alt="">
                    <!-- <img src="@/assets/img/login_title.png" alt=""> -->
                    大坝安全监测预警管理平台
                </div>
                <div class="login-left">
                    <img src="@/assets/img/login_left.png" alt="">
                </div>
                <div class="ms-login">
                    <div class="ms-title">欢迎登录</div>
                    <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                        <div class="login-type">
                            <span :class="type===1?'active':''" class="zhdl" @click="changeType(1)">账号密码登录</span>
                            <span class="middle">|</span>
                            <span :class="type===2?'active':''" class="mmdl" @click="changeType(2)">验证码登录</span>
                        </div>
                        <!-- 账号密码 -->
                        <el-form-item prop="username" v-if="type === 1" class="flex-item">
                            <img src="../assets/img/user-icon.png" alt="">
                            <el-input clearable v-model="param.username" maxlength="11" placeholder="手机号码" @keyup.enter="submitForm()">
                            </el-input>
                        </el-form-item>
                        <el-form-item class="secondItem flex-item"  prop="password" v-if="type === 1"> 
                            <img src="../assets/img/pwd.png" alt="">
                            <el-input
                                clearable
                                type="password"
                                show-password
                                placeholder="密码"
                                v-model="param.password"
                                @keyup.enter="submitForm()"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item class="secondItem flex-item" v-if="type === 1" prop="imgCode">
                            <el-input
                                class="pwd"
                                type="input"
                                placeholder="图形验证码"
                                v-model="param.imgCode"
                                @keyup.enter="submitForm()"
                            >
                            </el-input>
                            <img :src="fileField" @click="getCode" alt="图形验证码">
                        </el-form-item>
                        <!-- 手机验证码 -->
                        <el-form-item prop="phone"  v-if="type === 2" class="flex-item02">
                            <img src="../assets/img/user-icon.png" alt="">
                            <el-input clearable v-model="param.phone" maxlength="11" placeholder="手机号码" @keyup.enter="submitForm()">
                                
                            </el-input>
                        </el-form-item>
                        <el-form-item class="secondItem flex-item02" v-if="type === 2" prop="code">
                            <el-input
                                clearable
                                class="pwd"
                                type="input"
                                placeholder="手机验证码"
                                v-model="param.code"
                                @keyup.enter="submitForm()"
                            >
                            </el-input>
                            <el-button class="yzmbtn" type="primary" @click="getYzm" :disabled="isDisabled">{{isDisabled? count+'秒后重新获取':text}}</el-button>
                        </el-form-item>
                        <div class="forget-password"> 
                            <span @click="forgotPassword">忘记密码</span>
                        </div>
                    <!-- <el-form-item>
                        <el-button type="text" @click="register">账号注册</el-button>
                    </el-form-item> -->
                    <div class="login-btn">
                        <el-button class="login-button" :disabled="loginDisabled" :loading="loginDisabled" @click="submitForm()">登 录</el-button>
                    </div>
                    
                </el-form>
            </div>
            
            </div>
            
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="忘记密码"
            width="350px"
            :before-close="handleClose"
        >
                <el-form  :model="resetPwdForm" :rules="resetPwdRules" ref="resetPwd">
                    <el-form-item prop="phone" label="手机号码" class="flex-item02">
                        <el-input clearable type="input" v-model="resetPwdForm.phone" maxlength="11" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码" class="flex-item02">
                        <el-input clearable
                            placeholder="手机验证码"
                            v-model="resetPwdForm.code"
                        >
                        </el-input>
                        <el-button class="yzmbtn" type="primary" @click="getResetPwdYzm" :disabled="isDisabledPwd">{{isDisabledPwd? countPwd+'秒后重新获取':textPwd}}</el-button>
                    </el-form-item>
                    <el-form-item prop="password" label="新密码" class="flex-item02">
                        <el-input
                            clearable
                            type="password"
                            placeholder="请输入新密码"
                            v-model="resetPwdForm.password"
                        >
                    </el-input>
                    </el-form-item>
                </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleResetPassword">确认</el-button>
            </span>
            </template>
        </el-dialog>
        
    </div>
</template>

<script>
import {checkPhone} from '@/utils/common.js'
import adminApi from '@/api/login'

export default {
    data() {
        return {
            text: '获取验证码',
            textPwd: '获取验证码',
            dialogVisible: false,
            countPwd: 60,
            count: 60,
            timer: null,
            timerPwd: null,
            loginDisabled: false,
            isDisabledPwd: false,
            isDisabled: false,
            type: 1,  // 1-账号密码 2-验证码
            param: {
                username: '',
                password: "",
                code: '',
                imgCode: '',
            },
            resetPwdForm: {
                code: '',
                password: '',
                phone: '' //手机号
            },
            rules: {
                username: [
                    { required: true, message: "请输入手机号码", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                code: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ],
                imgCode: [
                    { required: true, message: "请输入图形验证码", trigger: "blur" }
                ]
            },
            resetPwdRules: {
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" }
                ],
                code: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入新密码", trigger: "blur" }
                ],
            },
            fileField: ''
        };
    },
    created() {
        this.$store.commit("clearTags");
        this.getCode()
        // this.$store.commit('setMenu', '[]')//这里需要清空路由
    },
    methods: {
        register() {
            this.$router.push('/register')
        },
        getCode() {
            adminApi.getCode({})
                .then(res => {
                    this.fileField =  this.getBase64(res)
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        submitForm() {
            账号密码
            if(this.type === 1) {
                this.$refs.login.validate(valid => {
                    if (valid) {
                        this.loginDisabled = true
                        this.$store.dispatch("loginByPwd", {code : this.param.imgCode , username : this.param.username, password: this.param.password })
                            .then(() => {
                                // this.$store.dispatch("getPermissions")
                                // .then(() => {
                                    this.loginDisabled = false
                                    this.$router.push("/home")
                                    this.$message.success("登录成功")
                                // })
                                // .catch(err => {
                                //     this.loginDisabled = false
                                // })
                            })
                            .catch((err) => {
                                this.loginDisabled = false
                                this.getCode()
                                this.$message.error(err.message)
                            })
                    } else {
                        return false
                    }
                })
            } 
            // 验证码
            else {
                if(!checkPhone(this.param.phone) ) {
                    this.$message({
                        type: 'warning',
                        message: '手机号码输入有误'
                    })
                    return false
                }
                this.$refs.login.validate(valid => {
                    if (valid) {
                        this.loginDisabled = true
                        this.$store.dispatch("loginByYzm", {phone: this.param.phone, code: this.param.code })
                            .then(() => {
                                // this.$store.dispatch("getPermissions")
                                // .then(() => {
                                    this.loginDisabled = false
                                    this.$router.push("/home")
                                    this.$message.success("登录成功")
                                // })
                                // .catch(err => {
                                //     this.loginDisabled = false
                                // })

                            })
                            .catch((err) => {
                                this.loginDisabled = false
                                this.$message.error(err.message||err.data.message)
                            })
                    } else {
                        this.$message.error("请输入手机号码和验证码")
                        return false
                    }
                })
            }
            
        },
        getYzm() {
            if(!checkPhone(this.param.phone) ) {
                this.$message({
                    type: 'warning',
                    message: '手机号码输入有误'
                })
                return false
            }
            adminApi.sendCode({phone: this.param.phone})
                .then((res) => {
                    this.isDisabled = true
                    this.$message.success(res.message)
                    this.timer = setInterval(() => {
                        this.count --
                        if(this.count <= 0) {
                        this.isDisabled = false
                        this.count = 0
                        this.text = '重新获取'
                        clearInterval(this.timer)
                        }
                    },1000)
                })
                .catch((err) => {
                    this.$message.error(err.message||err.data.message)
                })
           
        },
        // 文件流转图片格式
        getBase64(img) {
            const base64Url = `data:image/png;base64,${window.btoa(
            new Uint8Array(img).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
            )
            )}`;
            return base64Url
        },
        changeType(val) {
            this.type = val
        },
        forgotPassword() {
            this.dialogVisible = true
        },
        handleClose() {
            this.$refs.resetPwd.resetFields()
            this.dialogVisible = false
        },
        // 忘记密码获取验证码
        getResetPwdYzm() {
            if(!checkPhone(this.resetPwdForm.phone) ) {
                this.$message({
                    type: 'warning',
                    message: '手机号码输入有误'
                })
                return false
            }
            
            adminApi.sendCode({phone: this.resetPwdForm.phone})
                .then((res) => {
                    this.isDisabledPwd = true
                    this.$message.success(res.message)
                    this.timerPwd = setInterval(() => {
                        this.countPwd --
                        if(this.countPwd <= 0) {
                            this.isDisabledPwd = false
                            this.countPwd = 0
                            this.textPwd = '重新获取'
                        clearInterval(this.timerPwd)
                        }
                    },1000)
                })
                .catch((err) => {
                    this.$message.error(err.message||err.data.message)
                })
        },
        handleResetPassword() {
            this.$refs.resetPwd.validate(valid => {
                if(valid) {
                    
                    adminApi.resetPassword(this.resetPwdForm)
                        .then(res => {
                            this.$message.success(res.message)
                            
                            this.handleClose()
                        })
                        .catch(err => {
                            this.$message.error(err.message)
                        })
                } else {
                    return false
                }
             })
            
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep.login-wrap {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/img/login_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    &>div{
        position: relative;
        width: 1200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        display: flex;
        box-shadow: 0px 10px 16px 0px rgba(56, 88, 141, 0.4);
    }
}
::v-deep.login{
    .flex-item {
        margin-top: 30px;
    }
    .flex-item .el-form-item__content{
        display: flex;
    }
    .flex-item02 {
        margin-top: 50px;
    }
    .flex-item02 .el-form-item__content{
        display: flex;
    }
    .el-input__inner {
        border: none;
        border-bottom: 1px solid #DADDE3;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        font-family: Source Han Sans CN;
        font-size: 36px;
        color: #6179A1;
        // border-bottom: 1px solid #ddd;
    }
    .login-left{
        width: 600px;
        height: 550px;
        img{
            width: 600px;
            height: 550px;
        }
    }
    .ms-login {
        width: 350px;
        height: 470px;
        padding: 40px 150px 40px 100px;
        background: white;
        overflow: hidden;
    }
    .login-type {
        margin: 65px 0 30px;
        display: flex;
        align-items: center;
    }
    .login-type span {
    
        color: #6179A1;
        cursor: pointer;
    }
    .zhdl {
        margin-right: 10px;
    }
    .mmdl {
        margin-left: 10px;
    }
    .middle {
        color: #126BFF !important;
    }
    .login-type .active {
        color: #126BFF;
    }
    .login-logo {
        position: absolute;
        left: 0;
        top: -70px;
        overflow: hidden;
        display: flex;
        align-items: center;
        font-family: '思源黑体';
        letter-spacing:5px;
        font-size: 38px;
        font-weight: bold;
        color: #0060FF;
        // color: #DADADA;
        // background: linear-gradient(0deg, #00A8FF 0%, #38F8FF 100%);
        // -webkit-text-fill-color: transparent;
        // -webkit-background-clip: text;
    }
    .login-logo img {
        // width: 100%;
        margin: 0 15px
    }
    .login-btn {
        text-align: center;
        margin: 30px 0;
        
    }
    .login-btn button {
        width: 280px;
        padding: 10px 0;
        font-size: 22px;
        background-color: #126BFF;
        color: white;
        border-radius: 30px;
    }
    .yzmbtn {
        background-color: #126BFF;
        color: white;
    }
    .login-btn button:hover {
        background-color: #438bff;
    }
    .el-input-group__prepend button {
        background-color: #126BFF;
        border-color: #126BFF
    }
    .el-icon-user:before {
        color: white!important;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
    .is-disabled {
        background: #69a0f8;
    }
    .forget-password {
        text-align: right;
        span{
            font-size: 12px;
            color: #5291FB;
            cursor: pointer;
        }
    }
}
::v-deep.secondItem {
    .el-form-item__content {
        display: flex;
        align-items: center;
    }
    .pwd {
        flex: 1;
    }
}

</style>